/*
 * @description: 常用样式封装
*/
@import './base.less';
// 弹窗动画
.basepop-enter-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.basepop-enter {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.basepop-enter-to {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.basepop-leave {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.basepop-leave-active {
  transform: translate(-50%, -50%) scale(0);
  opacity: 1;
}
// .basepop-leave-to {
//   transform:  translate(-50%, -50%) scale(0);
//   opacity: 1;
// }

// 弹窗帧动画
@keyframes showPopAnimation {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes hidePopAnimation {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}
@keyframes redPopupShowAnimation {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.baseShowPop {
  width: 100%;
  height: 100%;
  animation: showPopAnimation 0.5s;
}

.baseHidePop {
  width: 100%;
  height: 100%;
  animation: hidePopAnimation 0.5s;
}

.redPopupShow {
  width: 100%;
  height: 100%;
  animation: redPopupShowAnimation 0.5s forwards;
}

// 题目左滑右滑
.slideleft-enter-active,
.slideleft-leave-active {
  transition: 0.8s;
  transform: translate3d(0, 0, 0);
}
.slideleft-enter,
.slideleft-leave-active {
  transform: translate3d(-150%, 0, 0);
  visibility: visible;
}

// 渐隐渐显
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.7s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.faderouter-enter-active,
.faderouter-leave-active {
  transition: opacity 0.5s;
}
.faderouter-enter,
.faderouter-leave-active {
  opacity: 0;
}

.fadetitle-enter-active,
.fade-leave-active {
  transition: opacity 1.5s;
}
.fadetitle-enter,
.fade-leave-active {
  opacity: 0;
}

.fadeguidance-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fadeguidance-enter,
.fade-leave-active {
  opacity: 0;
}
.flex-main-center {
  display: flex;
  justify-content: center;
}

// 背景图
.bg(@url) {
  // background-image: url('~@/assets/img/@{url}');
  background-image: url('@img/@{url}');
  background-position: 0 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

// 宽高
.wh(@width, @height) {
  width: @width * 1px;
  height: @height * 1px;
}

//清除浮动带来的影响
.clearfix:after {
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}

.clearfix {
  zoom: 1;
}

/* flex布局 */
//主轴交叉轴居中
.flex_mc_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

//主轴居中
.flex_main_center {
  display: flex;
  justify-content: center;
}

//交叉轴居中
.flex_cross_center {
  display: flex;
  align-items: center;
}

//修改主轴排列 居中
.flex_column_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-mc-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-main-center {
  display: flex;
  justify-content: center;
}
.flex-cross-center {
  display: flex;
  align-items: center;
}
.flex-direction-column {
  display: flex;
  flex-direction: column;
}

// 定位布局

// 定位主轴居中
.position_main_center(@top) {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: @top * 1px;
}

// 定位纵轴居中
.position_column_center(@left) {
  position: absolute;
  left: @left * 1px;
  transform: translateY(-50%);
  top: 50%;
}

// 定位主纵轴居中
.position_center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// 定位
.position_absolute_left(@left, @top) {
  position: absolute;
  top: @top * 1px;
  left: @left * 1px;
}

.position_absolute_right(@right, @top) {
  position: absolute;
  top: @top * 1px;
  right: @right * 1px;
}

.position_bottom_center(@bottom) {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: @bottom * 1px;
}
.position_absolute_left_bot(@left, @bottom) {
  position: absolute;
  bottom: @bottom * 1px;
  left: @left * 1px;
}
.position_absolute_right_bot(@right, @bottom) {
  position: absolute;
  bottom: @bottom * 1px;
  right: @right * 1px;
}

// 隐藏滚动条
.container_scroll {
  height: 100%;
  overflow-y: auto;
}

.container_scroll::-webkit-scrollbar {
  opacity: 0;
  display: none;
  width: 0;
  height: 0;
  color: transparent !important;
}
.atl(@top,@left) {
  position: absolute;
  top: @top * 1px;
  left: @left * 1px;
}
.atr(@top,@right) {
  position: absolute;
  top: @top * 1px;
  right: @right * 1px;
}
.alb(@left,@bottom) {
  position: absolute;
  left: @left * 1px;
  bottom: @bottom * 1px;
}
.arb(@right,@bottom) {
  position: absolute;
  right: @right * 1px;
  bottom: @bottom * 1px;
}
//居中
.ab(@top) {
  position: absolute;
  top: @top * 1px;
  left: 50%;
  transform: translateX(-50%);
}
.fx() {
  display: flex;
  align-items: center;
  justify-content: center;
}
// 兼容性问题挺多 建议不要用
// .popStyle {
//   overflow-x: hidden;
//   overflow-y: scroll;
//   overflow: -moz-scrollbars-none;
//   -ms-overflow-style: none;
//   -webkit-overflow-scrolling: touch;
// }

// .popStyle::-webkit-scrollbar {
//   display: none;
//   width: 0 !important;
// }

/* 
快速生成帧动画
@m:宽的帧数
@n:高的帧数
@i:从左往右第几帧
@j:从上往下第几帧
@width:单个帧的宽
@height:单个帧的高
*/
.circleBig(@m: 0, @n: 0, @i: 0, @j: 0, @width: 0, @height: 0)
  when
  (@i < @m)
  and
  (@j < @n) {
  @tmp1: @m * @n; // 总共的帧数
  @tmp2: @j * @m + @i; // 当前的帧数
  @x: @tmp2 / @tmp1 * 100; // 当前的进度
  @selector: e('@{x}%');
  @tmp3: @i * -@width;
  @tmp4: @j * -@height;
  @left: e('@{tmp3}px'); // background left 值
  @top: e('@{tmp4}px'); // background top 值
  @jPlus: @j + 1;
  @iPlus: @i + 1;

  @{selector} {
    background-position: @left @top;
  }

  & when (@iPlus >=@m) {
    .circleBig(@m, @n, 0, @jPlus, @width, @height);
  }

  & when (@iPlus < @m) {
    .circleBig(@m, @n, @iPlus, @j, @width, @height);
  }
}
